<template lang="html">
  <div class="denglu">
      <h3>{{ name }}</h3>
		<div class="tabbar_a">
			<router-link class="flag" to="/mine/one" :class="{'linkchange':isfo}">动态验证码登录</router-link>
			<router-link class="flag" to="/mine/two">账号登录</router-link>
		</div>
		<router-view></router-view>
		<div class="booox">
		<fieldset>
			<legend class="span_aa">第三方社交分享</legend>
			<!-- <legend>第三方社交账号登录</legend> -->
		</fieldset>
			<div class="third_shejiao">
				<img @click="xqq()" src="../../static/qq.png" alt="">
        <img @click="wei()" src="../../static/weixin.png" alt="">
				<img @click="fen()" src="../../static/weibo.png" alt="">
			</div>
		</div>
  </div>
</template>

<script>
import bus from '../js/bus'
export default {
  props:['heihei'],
		data(){
			return{
				name:'登录凯撒旅游',
        isfo:true,
        weibo:{},
        weixin:{},
        qq:{}
			}
		},
    watch:{
      '$route'(newValue,oldValue){
        this.isfo = false
      }
    },
    created(){
      if (window.localStorage.getItem("user")) {
        console.log(111);
        this.$router.push({name:'aftermine'});
    }
    },
  methods:{
    fen(){
      this.weibo.send();
    },
    wei(){
      this.weixin.send();
    },
    xqq(){
      this.qq.send();
    }
  },
  mounted(){
    mobShare.config( {
    appkey: '22766de71e198', // appkey
    params: {
        url: 'http://txspring.cn:8080/#/home', // 分享链接
        title: 'lalala', // 分享标题
      },
      callback: function( plat, params ) {
        console.log('111');
    }
    } ),
    this.weibo = mobShare( 'weibo' );
    this.weixin = mobShare( 'weixin' );
    this.qq = mobShare( 'qq' );
  }
  // created(){
  //   bus.$on('flah',(data)=>{
  //     console.log('jieshou');
  //     this.isfo = false
  //   })
  // }
}
</script>

<style lang="css">
.tabbar_a .router-link-active{
background-color: #00b0ec;
color: white;
}
.linkchange{
  background-color: #00b0ec;
  color: white;
}
.booox>fieldset{
border-bottom: none;
border-left: none;
border-right: none;
}
.booox{
width: 90%;
height: 170px;
margin-top: 110px;
margin-left: 5%;
padding: 0.1px;
}
.third_shejiao{
width: 100%;
height: 150px;
display: flex;
justify-content: space-around;
align-items: center;
}
.third_shejiao>img{
width: 3rem;
height: 3rem;
}
.span_aa{
display: block;
width: 50%;
height: 20px;
background-color: white;
display: inline-block;
color: gray;
}
.colorr{
  background-color: transparent;
  width: 100%;
  height: 100%;
  display: inline-block;
  text-decoration: none;
}
.tabbar_a{
  display: flex;
  justify-content: space-around;
  border: 1px solid blue;
  border-radius: 0.5rem;
  height: 2rem;
  width: 90%;
  margin: auto;
  margin-top: 20px;
  line-height: 2rem;
}
.tabbar_a>a{
  width: 50%;
  text-align: center;
  text-decoration: none;
}
.denglu>h3{
  background-color: #00b0ec;
  text-align: center;
  color: white;
  height: 3rem;
  line-height: 3rem;
    font-size: 1.5rem;
}
</style>
